<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网盘用户登陆</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/signin.css" rel="stylesheet">
<script src="js/vue2.4.0.js"></script>
</head>

<body>
	<nav class="navbar navbar-default" role="navigation" style="background-color: #31B0D5;">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WangPan</a>
      <a class="navbar-brand" href="shouye.html">首页</a>
      <a class="navbar-brand">|</a>
      <!-- <a class="navbar-brand" href="shouye.html">动态</a>
      <a class="navbar-brand">|</a>
      <a class="navbar-brand" href="shouye.html">动态</a>
      <a class="navbar-brand">|</a>
      <a class="navbar-brand" href="shouye.html">动态</a> -->
      <div style="float: right;border: 2px black solid;background-color: #D6E9C6;">
      	<a class="navbar-brand" style="" href="#" onclick="tologin(1)"><span class="glyphicon glyphicon-user">登录</a>
      	<a class="navbar-brand" style="" href="#" onclick="tologin(0)"><span class="glyphicon glyphicon-plus">注册</a>   
      </div>
    </div>
  </div>
</nav>
	<div class="container">
		<div class="row">
			<div id="app">
			<div class="signin col-sm-4">
				<div class="img-head"><img src="images/test/head_120.png" alt="" class="img-circle">
				</div>
				<div class="signin-text"><b>用户登录</b></div>
				<form :action="url" class="form-signin" role="form" onsubmit="return vm.login()">
					<input type="text" class="form-control" v-model="username" placeholder="账号" required autofocus />
					<input type="password" class="form-control" v-model="password" placeholder="密码" required />
					<!-- <div id="dragContainer">
					    <div id="dragBg"></div>
					    <div id="dragText"></div>
					    <div id="dragHandler" class="dragHandlerBg"></div>
			    	</div> -->
			        <!-- <br /> -->
					<button class="btn btn-lg btn-success " type="submit" style="width: 100%;">登录</button>
					<!-- <button class="btn btn-lg btn-warning " onclick="alert('尽请期待')" type="button"><a href="#">游客登录</a></button> -->
					<label class="checkbox">
						<input type="checkbox" value="remember-me"> 记住我<a style="float: right;">忘了密码？</a>
					</label>
				</form>
				<div class="signin-foot">
					<a href="#" onclick="tologin(0)" style="width: 66.6%;display: block;float: left;color: #7a8462;">立刻注册</a>
					<!-- <a href="#" style="width: 33%;display: block;float: left;color: #46B8DA;">忘了账号T_T</a> -->
					<a href="#" onclick="alert('尽请期待')" style="width: 33.3%;display: block;float: right;color: #7a8462;">使用第三方登陆</a>
				</div>
			</div>
			</div>
			
			<div id="app2">
			<div class="regite col-sm-4" style="display: none;">
				<div class="img-head"><img src="images/test/head_121.png" alt="" class="img-circle">
				</div>
				<div class="regite-text"><b>快速注册</b></div>
				<form :action="lurl" id="regite" class="form-regite" role="form" onsubmit="return vn.register()">
					<div>
						<input id="username" v-model="lusername" class="form-control username" type="text" style="background: url(images/login_user2.png) 0 0 #FFFFFF no-repeat;" placeholder="一个新的账号" required autofocus />
						<span class="glyphicon glyphicon-refresh myP" style="color: green;" title="校验账号是否存在"></span>
						<p class="myText">字母开头，6-16个字符</p>
					</div>
					<div>
						<input id="password" v-model="lpassword" type="password" 	style="background: url(images/login_pas2.png) 0 0 #FFFFFF no-repeat;" class="form-control pwd1" placeholder="密码" required />
						<span class="glyphicon glyphicon-eye-open myP" title="密码查看与隐藏" onclick="see(1)"></span>
						<p class="myText">以字母开头，长度在8~16之间，必须包含字母、数字</p>
					</div>
					<div>
						<input id="rpassword" type="password" 	style="background: url(images/login_pas2.png) 0 0 #FFFFFF no-repeat;" class="form-control pwd2" placeholder="确认密码" required />
						<span class="glyphicon glyphicon-eye-open myP" title="密码查看与隐藏" onclick="see(2)"></span>
						<p class="myText">与秘密相同</p>
					</div>
					<div>
						<input id="phone" v-model="lphone" type="text" 		style="background: url(images/04-128.png) 0 0 #FFFFFF no-repeat;" class="form-control phone" placeholder="手机号码" required />
						<span class="glyphicon glyphicon-refresh myP" style="z-index: -1;"></span>
						<p class="myText">正确手机格式</p>
					</div>
					<!-- <div>
						<input id="textCode" type="text" class="form-control testCode" placeholder="短信验证码" style="width: 60%;float: left;background: url(images/login_email.png) 0 0 #FFFFFF no-repeat;" required />
						<button class="btn btn-lg btn-default " type="button" style="width: 38%;float: left;margin-left: 5px;">获取验证码</button>
						<span class="glyphicon glyphicon-refresh myP" style="z-index: -1;"></span>
						<p class="myText">6个数字</p>
					</div> -->
					<button class="btn btn-lg btn-success" type="submit" style="width: 100%;">注册</button>
				</form>
				<div class="progress progress-striped" style="">
					<div id="myBar" class="progress-bar progress-bar-success" role="progressbar"
					     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
					     style="width: 0%;">
					    <span class="sr-only">90% 完成（成功）</span>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/main.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
<script src="js/sign.js"></script>
<script>

tologin = function(i){
	var login = document.getElementsByClassName("signin")[0];
	var regite = document.getElementsByClassName("regite")[0];
	if(i == 0){
		login.style.display = "none";
		regite.style.display = "";
	}else if(i == 1){
		login.style.display = "";
		regite.style.display = "none";
	}
	
}

var iii = window.location.href.split("=")[1];
if(iii != null){
	tologin(iii);
}
see = function(i){
	var pwd = document.getElementsByClassName("pwd"+i)[0];
	if(pwd.type == "password"){
		pwd.type = "text";
	}else{
		pwd.type = "password";
	}
}

window.onload = function() {
            var dragContainer = document.getElementById("dragContainer");
            var dragBg = document.getElementById("dragBg");
            var dragText = document.getElementById("dragText");
            var dragHandler = document.getElementById("dragHandler");

            //滑块最大偏移量
            var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
            //是否验证成功的标记
            var isVertifySucc = false;
            initDrag();

            function initDrag() {
                dragText.textContent = "拖动滑块验证";
                dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);

                dragHandler.addEventListener("touchstart", onDragHandlerMouseDown);
            }

            function onDragHandlerMouseDown(event) {
                document.addEventListener("mousemove", onDragHandlerMouseMove);
                document.addEventListener("mouseup", onDragHandlerMouseUp);

                document.addEventListener("touchmove", onDragHandlerMouseMove);
                document.addEventListener("touchend", onDragHandlerMouseUp);
            }

            function onDragHandlerMouseMove(event) {
                /*
                html元素不存在width属性,只有clientWidth
                offsetX是相对当前元素的,clientX和pageX是相对其父元素的

                touches：表示当前跟踪的触摸操作的touch对象的数组。
                targetTouches：特定于事件目标的Touch对象的数组。
            　　changedTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
                */
				
				//特别注意：由于translate(-50%)，所以实际的left比属性中的offsetLeft要左50%
                var left = (event.clientX || event.changedTouches[0].clientX) - dragHandler.clientWidth / 2 - dragContainer.offsetLeft + dragContainer.clientWidth / 2;
				console.log(event.clientX, dragContainer.offsetLeft);
				console.log(event)
                if(left < 0) {
                    left = 0;
                } else if(left > maxHandlerOffset) {
                    left = maxHandlerOffset;
                    verifySucc();
                }
                dragHandler.style.left = left + "px";
                dragBg.style.width = dragHandler.style.left;
            }
            function onDragHandlerMouseUp(event) {
                document.removeEventListener("mousemove", onDragHandlerMouseMove);
                document.removeEventListener("mouseup", onDragHandlerMouseUp);

                document.removeEventListener("touchmove", onDragHandlerMouseMove);
                document.removeEventListener("touchend", onDragHandlerMouseUp);

                dragHandler.style.left = 0;
                dragBg.style.width = 0;
            }

            //验证成功
            function verifySucc() {
                isVertifySucc = true;
                dragText.textContent = "验证通过";
                dragText.style.color = "white";
                dragHandler.setAttribute("class", "dragHandlerOkBg");

                dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
                document.removeEventListener("mousemove", onDragHandlerMouseMove);
                document.removeEventListener("mouseup", onDragHandlerMouseUp);

                dragHandler.removeEventListener("touchstart", onDragHandlerMouseDown);
                document.removeEventListener("touchmove", onDragHandlerMouseMove);
                document.removeEventListener("touchend", onDragHandlerMouseUp);
            };
        }
</script>